<template>
  <div class="box">
    <!-- //顶部栏 -->
    <div>
      <TopNavVue>
        <template #center>
          <van-search
            v-model="searchValue"
            placeholder="请输入搜索关键词"
            shape="round"
          />
        </template>
        <template #right-icon>
          <span class="iconfont icon-maikefeng"></span>
        </template>
      </TopNavVue>
    </div>
    <!-- 轮播图 -->
    <div class="swipebox">
      <SwipeVue :listData="swipeList"></SwipeVue>
    </div>
    <!-- 主要功能导航 -->
    <div>
      <MainNavVue />
    </div>
    <div>
      <ListBoxVue>
        <template #top-left>
          <span>推荐歌单</span>
        </template>
        <template #top-right>
          <span>更多</span>
        </template>
        <template #content>
          <span>内容</span>
        </template>
      </ListBoxVue>
    </div>
  </div>
</template>
<script setup>
import TopNavVue from "../layout/TopNav.vue";
import SwipeVue from "./Swipe.vue";
import MainNavVue from "./MainNav.vue";
import ListBoxVue from "./ListBox.vue";
import { banner,recommend } from "@/api/home.js";
import { onMounted, ref } from "vue";
const swipeList = ref([]);
const searchValue = ref('')
onMounted(() => {
  banner(1).then((res) => {
    swipeList.value = res.data.banners;
  });
  recommend(5).then(res=>{console.log(res.data)})

});
</script>
<style lang="less" scoped>
</style>